<!--
  Generated template for the UserRechargePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
    <ion-navbar>
        <ion-title>充值中心</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding-left padding-right>
    <h6>充值金额</h6>
    <ion-grid>
        <ion-row>
            <ion-col col-4 float-left text-center *ngFor="let item of Arr;let i=index;" >
                <p [ngClass]="{'isChoose':chooseI==i}" (click)='chooseMoney(item,i)' >{{ item }} 元</p>
            </ion-col>
            <ion-col col-4 float-left >
                <ion-input 
                    [ngClass]="{'isChoose':chooseI==8}" 
                    [(ngModel)]="other" 
                    (ionChange)="onchange(other)" 
                    (ionFocus)="onFocus()" 
                    text-center 
                    type="tel"
                    maxlength="4"
                    placeholder="其他金额" ></ion-input>
            </ion-col>
        </ion-row>
    </ion-grid>


    <!-- 选择付款方式 -->
    <h6>支付方式</h6>
    <ion-list radio-group [(ngModel)]='payType' (ionChange)='chooseType(payType)' >
        <ion-item *ngFor='let item of type;let i=index;'>
            <ion-label>
                <img class="type-icon" height="20" width="20" src="{{ item.img }}" alt="">
                <span class="type-name" >{{ item.title }}</span>
            </ion-label>
            <ion-radio checked value="{{ item.val }}"></ion-radio>
        </ion-item>
    </ion-list>

    <button ion-button round (click)="sub()" >确认充值</button>

</ion-content>
